<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row class="ml10" v-show="showSearch">
        <el-form :inline="true" :model="queryFormData" ref="queryRef">
          <el-form-item label="查询年份">
            <el-date-picker v-model="queryFormData.detectionTime" type="monthrange" start-placeholder="开始时间"
                            end-placeholder="结束时间" format="YYYY-MM" date-format="YYYY/MM"
                            value-format="YYYY-MM"
                            :disabled-date="disabledDate"/>
          </el-form-item>
          <el-form-item>
            <el-button @click="queryBtn" formDialogRef icon="search" type="primary">
              {{ $t('common.queryBtn') }}
            </el-button>
            <el-button @click="resetQuery" formDialogRef icon="Refresh">{{
                $t('common.resetBtn')
              }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>

      <el-row>
        <div class="mb8" style="width: 100%">
          <right-toolbar v-model:showSearch="showSearch" :export="'blood_bloodxCustomer_export'"
                         class="ml10 mr20" style="float: right" @queryTable="getDataList"></right-toolbar>
        </div>
      </el-row>

      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
                :header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle">
        <!-- <el-table-column type="selection" width="40" align="center" /> -->
        <el-table-column type="index" label="#" width="45"/>
        <el-table-column prop="code" label="医生编号"/>
        <el-table-column prop="name" label="医生姓名"/>
        <el-table-column prop="village" label="村" show-overflow-tooltip/>
        <el-table-column prop="outNum" label="总血糖超标人数">
          <template #default="scope">
            <el-button text type="primary"
                       @click="openDialog(scope.row.outPatient)">{{ scope.row.outNum }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="controlledNum" label="已完成控制人数" show-overflow-tooltip>
          <template #default="scope">
            <el-button text type="primary"
                       @click="openDialog(scope.row.controlled)">{{ scope.row.controlledNum }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="unControlledNum" label="未完成控制人数">
          <template #default="scope">
            <el-button text type="primary"
                       @click="openDialog(scope.row.unControlled)">{{ scope.row.unControlledNum }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="rateCompletion" label="控制完成就诊比例">
          <template #default="scope">
<!--            四舍五入-->

            {{ (scope.row.rateCompletion*100).toFixed(2) }}%
          </template>
        </el-table-column>
      </el-table>

    </div>
    <el-dialog width="80%" title="总血糖超标人数" v-model="visible" :close-on-click-modal="false" draggable>
      <el-form :inline="true" :model="chaobiaoForm" ref="queryRef">
        <el-form-item label="身份证号" prop="card">
          <el-input v-model="chaobiaoForm.card" placeholder="请输入社保卡"/>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input placeholder="请输入姓名" style="max-width: 180px" v-model="chaobiaoForm.name"/>
        </el-form-item>
        <el-form-item>
          <el-button @click="chaobiaoSearch" icon="search" type="primary">
            {{ $t('common.queryBtn') }}
          </el-button>
          <el-button icon="Refresh" @click="chaobiaoRest">{{
              $t('common.resetBtn')
            }}
          </el-button>
        </el-form-item>
      </el-form>
      <el-table height="calc(100vh - 400px)" :data="detailList" border :cell-style="tableStyle.cellStyle"
                :header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle">
        <el-table-column type="index" label="#" width="45"/>
        <el-table-column prop="name" label="姓名" show-overflow-tooltip/>
        <el-table-column prop="card" label="身份证号" show-overflow-tooltip/>
        <el-table-column prop="age" label="年龄" show-overflow-tooltip/>
        <el-table-column prop="sex" label="性别" show-overflow-tooltip/>
        <el-table-column prop="department" label="村" show-overflow-tooltip/>
        <el-table-column label="体检信息" width="150" fixed="right">
          <template #default="scope">
            <el-button icon="edit-pen" text type="primary" @click="openTiJian(scope.row)"
            >体检信息
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="就诊记录" width="150" fixed="right">
          <template #default="scope">
            <el-button icon="edit-pen" text type="primary" @click="openExamData(scope.row)"
            >就诊记录
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <exam-view ref="examViewRef"></exam-view>

      <exam-data-view ref="examDataRef"></exam-data-view>
    </el-dialog>
  </div>
</template>
<script setup lang="ts" name="bloodxTranslation">
import {BasicTableProps, useTable} from '/@/hooks/table';
// import {useMessage, useMessageBox} from "/@/hooks/message";
import {getDetectionStatistics} from '/@/api/blood/bloodxTranslation';
import ExamView from "/@/views/blood/bloodxTranslation/examView.vue";
import {dayjs} from "element-plus";

const examDataView = defineAsyncComponent(() => import('./examDataView.vue'));
// import {fetchList} from "/@/api/blood/bloodxCustomer";

const showSearch = ref(true);

// 搜索变量
const queryRef = ref();
const examViewRef = ref();
const examDataRef = ref();

const visible = ref(false);
const state: BasicTableProps = reactive<BasicTableProps>({
  pageList: getDetectionStatistics,
  isPage: false,
  queryForm: {
    startTime: dayjs().subtract(1, 'year').format('YYYY-MM'),
    endTime: dayjs().format('YYYY-MM'),
  },
});
const {getDataList, sortChangeHandle, tableStyle} = useTable(state);
const detailList = ref([]);
const detailListOld = ref([]);

const chaobiaoForm = reactive({
  card: '',
  name: '',
});

const openTiJian = (row) => {
  examViewRef.value.getData(row);
};


const openExamData = (row) => {
  examDataRef.value.openDialog(row);
  // examDataRef.value.getExamData(row);
};

const chaobiaoSearch = () => {
  detailList.value = [];
  detailListOld.value.forEach(item => {
    if (chaobiaoForm.card) {
      if (item.card.indexOf(chaobiaoForm.card) > -1) {
        detailList.value.push(item);
      }
    } else if (chaobiaoForm.name) {
      if (item.name.indexOf(chaobiaoForm.name) > -1) {
        detailList.value.push(item);
      }
    } else if (chaobiaoForm.card && chaobiaoForm.name) {
      if (item.card.indexOf(chaobiaoForm.card) > -1 || item.name.indexOf(chaobiaoForm.name) > -1) {
        detailList.value.push(item);
      }
    } else {
      detailList.value = detailListOld.value;
    }
  });
};

const chaobiaoRest = () => {
  chaobiaoForm.card = '';
  chaobiaoForm.name = '';
  detailList.value = detailListOld.value;
};


const openDialog = (row) => {
  visible.value = true;
  detailList.value = row;
  detailListOld.value = row;
};
const queryFormData = reactive({
  // 最近一年的时间
  detectionTime: [
    dayjs().subtract(1, 'year').format('YYYY-MM'),
    dayjs().format('YYYY-MM'),
  ],
});

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};

const queryBtn = () => {
  if (queryFormData.detectionTime.length > 0) {
    // 判断是否存在 00:00:00  或者 23:59:59，存在则不处理，不存在则添加
    if (queryFormData.detectionTime[0].indexOf('00:00:00') === -1) {
      state.queryForm.startTime = queryFormData.detectionTime[0] + ' 00:00:00';
    }
    if (queryFormData.detectionTime[1].indexOf('23:59:59') === -1) {
      state.queryForm.endTime = queryFormData.detectionTime[1] + ' 23:59:59';
    }
  }
  getDataList();
};

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields();
  queryFormData.detectionTime = [
    dayjs().subtract(1, 'year').format('YYYY-MM'),
    dayjs().format('YYYY-MM'),
  ];
  state.queryForm.startTime = dayjs().subtract(1, 'year').format('YYYY-MM');
  state.queryForm.endTime = dayjs().format('YYYY-MM');
  getDataList();
};
</script>
